<template>
    <div class="house" v-show="false">wsnm</div>
</template>
<script lang="ts">
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
const ww = window.innerWidth;
const wh = window.innerHeight
const param = {
    pasture: {
        w: 10000,
        h:10000
    },
    camera: {
        v: 60,
        aspect: ww / wh,
        np: 1,
        fp: 6000,
        x: 0,
        y: 0,
        z: 600
    },
    horizontal: 0.36 * Math.PI,
    // horizontal: 0,
    soar: 10,
    wallRotation: {
        l:.5*Math.PI
    }
}

// 草原
const pastureScene = new THREE.Scene()
const light = new THREE.AmbientLight(0xCCCCCC);
pastureScene.add(light);
pastureScene.fog = new THREE.Fog(0xffffff, 1, 6000)
const pastureGeo = new THREE.PlaneGeometry(param.pasture.w, param.pasture.h)
const pastureTexture = new THREE.TextureLoader().load('http://public.minio.zcloudtechs.cn:9000/web-static/canteen-app/home/grass.jpg')
pastureTexture.wrapS = THREE.RepeatWrapping;
pastureTexture.wrapT = THREE.RepeatWrapping;
pastureTexture.repeat.set(60, 60);
const pastureMtl = new THREE.MeshBasicMaterial({map: pastureTexture})
const pastureMesh = new THREE.Mesh(pastureGeo, pastureMtl)
pastureMesh.rotation.x = -param.horizontal;
pastureScene.add(pastureMesh)

// 房子
const house = new THREE.Group()

// 地基&基础
const foundationGeo = new THREE.PlaneGeometry(300, 200)
const foundationTexture = new THREE.TextureLoader().load('http://public.minio.zcloudtechs.cn:9000/web-static/canteen-app/home/foundation.jpg')
const foundationMtl = new THREE.MeshBasicMaterial({map: foundationTexture})
const foundationMesh = new THREE.Mesh(foundationGeo, foundationMtl)
foundationMesh.rotation.x = -param.horizontal;
foundationMesh.position.y = param.soar;
house.add(foundationMesh)

// 左右墙壁
const sideWallShape = new THREE.Shape()
sideWallShape.moveTo(-100, 0)
sideWallShape.lineTo(100,0)
sideWallShape.lineTo(100,100)
sideWallShape.lineTo(0,150)
sideWallShape.lineTo(-100,100)
sideWallShape.lineTo(-100,0)
const wallGeo = new THREE.ExtrudeGeometry(sideWallShape)
const wallTexture = new THREE.TextureLoader().load('http://public.minio.zcloudtechs.cn:9000/web-static/canteen-app/home/wall.jpg')
wallTexture.wrapS = wallTexture.wrapT = THREE.RepeatWrapping;
wallTexture.repeat.set( 0.01, 0.005 );
const wallMt = new THREE.MeshBasicMaterial({map:wallTexture})
const wallMeshL = new THREE.Mesh(wallGeo, wallMt)
wallMeshL.position.y = param.soar
wallMeshL.rotation.x = 0.14*Math.PI;
wallMeshL.rotation.y = .5*Math.PI;
wallMeshL.position.x = -150

const wallMeshR = new THREE.Mesh(wallGeo, wallMt)
wallMeshR.position.y = param.soar
wallMeshR.rotation.x = 0.14*Math.PI;
wallMeshR.rotation.y = .5*Math.PI;
wallMeshR.position.x = 150

house.add(wallMeshL)
house.add(wallMeshR)

// 前后墙壁
const wallShape = new THREE.Shape()
wallShape.moveTo(-150, 0)
wallShape.lineTo(150, 0)
wallShape.lineTo(150, 100)
wallShape.lineTo(-150, 100)
wallShape.lineTo(-150, 0)

const fwallShape = new THREE.Shape()
fwallShape.moveTo(-150, 0)
fwallShape.lineTo(150, 0)
fwallShape.lineTo(150, 100)
fwallShape.lineTo(-150, 100)
fwallShape.lineTo(-150, 0)

const windowShape = new THREE.Path()
windowShape.moveTo(-20, 20)
windowShape.lineTo(110, 20)
windowShape.lineTo(110, 80)
windowShape.lineTo(-20, 80)
windowShape.lineTo(-20, 20)
fwallShape.holes.push(windowShape)

const doorShape = new THREE.Path()
doorShape.moveTo(-120, 0)
doorShape.lineTo(-70, 0)
doorShape.lineTo(-70, 80)
doorShape.lineTo(-120, 80)
doorShape.lineTo(-120, 0)
fwallShape.holes.push(doorShape)

const fwallGeo = new THREE.ExtrudeGeometry(fwallShape)
const fwallMesh = new THREE.Mesh(fwallGeo, wallMt)

fwallMesh.position.y = -32.7
fwallMesh.rotation.x = 0.14*Math.PI;
fwallMesh.position.z = 90.2

const bwallGeo = new THREE.ExtrudeGeometry(wallShape)
const bwallMesh = new THREE.Mesh(bwallGeo, wallMt)
bwallMesh.position.y = 52.7
bwallMesh.rotation.x = 0.14*Math.PI;
bwallMesh.position.z = -90.2

house.add(fwallMesh)
house.add(bwallMesh)

// 屋顶
const roofGeo = new THREE.BoxGeometry(300, 130, 4)
const roofTexture = new THREE.TextureLoader().load('http://public.minio.zcloudtechs.cn:9000/web-static/canteen-app/home/tile.jpg')
const roofMtl = new THREE.MeshBasicMaterial({map:roofTexture})
const roofMesh = new THREE.Mesh(roofGeo, roofMtl)
roofMesh.position.y = 150
roofMesh.rotation.x = 0.508*Math.PI;

const roofMeshS = new THREE.Mesh(roofGeo, roofMtl)
roofMeshS.position.y = 100
roofMeshS.rotation.x = -0.213*Math.PI;
roofMeshS.position.z = 106

house.add(roofMesh)
house.add(roofMeshS)
// house.rotation.x = -0.36*Math.PI

// 摄像机
const camera = new THREE.PerspectiveCamera(param.camera.v, param.camera.aspect, param.camera.np, param.camera.fp)
camera.position.set(param.camera.x,param.camera.y, param.camera.z)
camera.lookAt(pastureScene.position)

// 渲染
pastureScene.add(house)
const renderer = new THREE.WebGLRenderer()
renderer.setSize(ww, wh)
renderer.setClearColor(0xcce0ff, 1);
document.body.appendChild(renderer.domElement)
new OrbitControls(camera, renderer.domElement)
renderer.setAnimationLoop(animation)

function animation() {
    console.log(123)
    renderer.render(pastureScene, camera)
}
</script>
<style lang="less" scoped>

</style>
